JavaScript 基本数据类型检测

wanglinzhizhi Feb 08, 2016

数据类型

原始类型

number
string
boolean
null
undefined
object
- Function
- Array
- Date
- ……

隐式转换

a==b
- “1.23”==1.23
- 0==false
- null==undefined
- new Object()==new Object()
- [1,2]==[1,2]
a===b
- 类型不同,返回false
- 类型相同
  - NaN 不等于 NaN
  - new Object 不等于 new Object
  - null === null
  - undefined === undefined

a==b

当类型相同 ,同===

当类型不同,尝试类型转化和比较:

- null==undefined
- number==string //转number 1=='1.0' true
- boolean==? //转number 1==true  //true
- object == number|string  //尝试对象转为基本类型 
- new String('hi') =='hi' //true
- 其他:false

类型检测

typeof
instanceof
Object.prototype.toString
constructor
duck type

typeof 100 === "number"
typeof true === "boolean"
typeof function () {} === "function"
typeof(undefined) ) === "undefined"
typeof(new Object() ) === "object"
typeof( [1, 2] ) === "object"
typeof(NaN ) === "number"
typeof(null) === "object"

typeof null === "object"

obj instanceof Object

 obj instanceof Object
 //例
 [1, 2] instanceof Array === true
new Object() instanceof Array === false

Object.prototype.toString

Object.prototype.toString.apply(null).slice(7,12);


Object.prototype.toString.apply([]); === "[object Array]";
Object.prototype.toString.apply(function(){}); === "[object Function]";
Object.prototype.toString.apply(null); === "[object Null]"
Object.prototype.toString.apply(undefined); === "[object Undefined]"
//  IE6/7/8 
Object.prototype.toString.apply(null) 
//返回[object Object]
//  bugs

类型检测小结

typeof
适合基本类型及function检测，遇到null失效。
[[Class]]
通过{}.toString拿到，适合内置对象和基元类型，遇到null和undefined失效(IE678等返回[object Object])。
instanceof
适合自定义对象，也可以用来检测原生对象，在不同iframe和window间检测时失效。

Demo

<!--
请在index.html文件中，编写arraysSimilar函数，实现判断传入的两个数组是否相似。具体需求：
1. 数组中的成员类型相同，顺序可以不同。例如[1, true] 与 [false, 2]是相似的。
2. 数组的长度一致。
3. 类型的判断范围，需要区分:String, Boolean, Number, undefined, null, 函数，日期, window.
当以上全部满足，则返回"判定结果:通过"，否则返回"判定结果:不通过"。
-->
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
</head>
<body>
    <script type="text/javascript">   
        /*
         * param1 Array 
         * param2 Array
         * return true or false
         */
        function arraysSimilar(arr1, arr2){
            var t1=[];
            var t2=[];
            var flag=true;
            if (arr1 instanceof Array && arr2 instanceof Array && arr1.length == arr2.length ) {
                for (var i = arr1.length - 1; i >= 0; i--) {
                    if (Object.prototype.toString.apply(arr1) !==Object.prototype.toString.apply(arr2) ) {
                        flag=false;
                        break;
                    }
                }
            }
            if (flag) { 
                return true;
            }
            return false;
        }
        //方法2
        function arraysSimilar(arr1, arr2) {
            var t1 = [];
            var t2 = [];
            if (arr1 instanceof Array && arr2 instanceof Array && arr1.length === arr2.length) {
                for (var i in arr1) {
                    t1.push(getType(arr1[i]));
                    t2.push(getType(arr2[i]));
                }
                return t1.sort().toString() === t2.sort().toString();
            } else {
                return false;
            }
        }
        function getType(o) {
            var _opt = Object.prototype.toString.apply(o);
            /\[object (\w+)\]/.test(_opt);
            return RegExp.$1;
        }
    </script>
    <script src="testData.js"></script>
</body>
</html>